<template>
	<view class="container">
		<form @submit="formSubmit">
			<view class="area">
				<textarea name="Link" maxlength="-1" placeholder="请输入或粘贴抖音、小红书个人主页链接地址" placeholder-class="gray" :value="Info.Link" ></textarea>
			</view>
			<view class="line">
				<view class="title">手机号码</view>
				<view class="text">
					<input name="Mobile" class="uni-input" type="number" placeholder="请输入您的手机号码" :value="Info.Mobile"></input>
				</view>
			</view>
			<view class="line">
				<view class="title">您的性别</view>
				<view class="text">
					<radio-group name="Sex" @change="SexChange">
						<label><view class="r1"><radio value="男" :checked="Info.Sex=='男'?true:false" color="#ff5732" /></view><view class="r2" style="margin-right: 60rpx;">男</view></label>
						<label><view class="r1"><radio value="女" :checked="Info.Sex=='女'?true:false" color="#ff5732" /></view><view class="r2">女</view></label>
					</radio-group>
				</view>
			</view>
			<view class="line">
				<view class="title">擅长领域</view>
				<view class="text">
					<radio-group name="Type">
						<label><view class="r1"><radio value="1" :checked="Info.Type==1?true:false" color="#ff5732" /></view><view class="r2">美食达人</view></label>
						<label><view class="r1"><radio value="2" :checked="Info.Type==2?true:false" color="#ff5732" /></view><view class="r2">时尚达人</view></label>
						<label><view class="r1"><radio value="3" :checked="Info.Type==3?true:false" color="#ff5732" /></view><view class="r2" style="margin-right: 0rpx;">其他</view></label>
					</radio-group>
				</view>
			</view>
			<view class="line">
				<view class="title">出生日期</view>
				<view class="text">
					<picker name="Birthday" mode="date" :value="Tools.toDate(Info.Birthday,'请选择出生日期')" @change="BirthdayChange">
						<view class="uni-input">{{Tools.toDate(Info.Birthday,'请选择出生日期')}}</view>
					</picker>
				</view>
			</view>
			<view class="btn">
				<button class="publish" form-type="submit">入驻</button>	
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Info:{Link:'', Mobile:'', Sex:'', Type:'', Birthday:''},
				Lat:0,
				Lng:0
			};
		},
		onLoad() {
			uni.getLocation({
			  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			  success: res=> {
			    this.Lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			    this.Lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。			    
			  }
			});
		},
		methods:{
			getAddress(latitude, longitude) {
			  uni.request({
			    url: `https://restapi.amap.com/v3/geocode/regeo?key=916351fcbd722d8114aec8b64e2c0f6a&location=${longitude},${latitude}`, // 使用你的API密钥替换YOUR_API_KEY
			    success: res=> {
			      if (res.statusCode === 200) {
			        console.log(JSON.stringify(res));
			      } else {
			        console.error('获取地址失败', res);
			      }
			    },
			    fail(err) {
			      console.error('请求失败', err);
			    }
			  });
			},
			SexChange(){
				this.Info.Birthday = "2000-06-01";
			},
			BirthdayChange(e){
				this.Info.Birthday=e.detail.value;
			},
			formSubmit(e){
				var data = e.detail.value;
				data.Act="Save_Blogger";
				data.Lat = this.Lat;
				data.Lng = this.Lng;
				if(data.Link.trim()==""){
					this.Util.Toast("请输入或粘贴抖音、小红书个人主页链接地址");
					return;
				}
				if(data.Link.trim().indexOf("douyin.com")==-1 && data.Link.trim().indexOf("xiaohongshu.com")==-1){
					this.Util.Toast("链接地址不正确，必须是抖音、小红书个人主页链接地址");
					return;
				}
				if(data.Mobile==""){
					this.Util.Toast("请输入您的手机号码");
					return;
				}
				if(data.Mobile.length!=11){
					this.Util.Toast("手机号码长度必须11位数字");
					return;
				}
				if(data.Sex==""){
					this.Util.Toast("请选择您的性别");
					return;
				}
				if(data.Type==""){
					this.Util.Toast("请选择您擅长的领域");
					return;
				}

				if(data.Birthday==""){
					this.Util.Toast("请选择您的生日");
					return;
				}
				this.Util.Loading("请稍候...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					if(json.State){
						this.Util.Toast(json.Msg, res=>{
							this.Util.ToSuccess("/pages/my/my", json.Msg,"进入我的页面",2);
						});
					}else{
						this.Util.Alert(json.Msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.container{padding:20rpx;
		.area{background-color: #ffffff; height:200rpx; border-radius: 16rpx; overflow: hidden; textarea{width:100%; height:200rpx; padding:20rpx;}}
		.line{width:100%; height:80rpx; display: flex; flex-direction: row; margin-top:20rpx;
			.title{width:150rpx; line-height: 70rpx; color:#545454;}
			.text{flex:1; height:70rpx; line-height: 70rpx; position: relative; .r1{float:left;} .r2{float:left; margin-right: 20rpx; padding-top:3rpx;}}
			.uni-input{width:100%; height:70rpx; line-height: 70rpx; padding-left:20rpx; background-color: #ffffff; border-radius: 6rpx;}
			
		}
		.btn{width:100%; height:90rpx; line-height: 90rpx; background-color: #ff5732; color:#ffffff; border-radius: 10rpx; margin-top:60rpx;
			button{border:0rpx; background-color: transparent; color:#ffffff;}
			button::after{border:0rpx;}
		}
	}
</style>
